<template>
   <div id="app">
      <section class="content">
         <!-- 展示页面 -->
         <router-view></router-view>
      </section>
      <!-- 底部导航 -->
      <Tabbar />
   </div>
</template>

<script>
import Tabbar from "@/components/FooterTabbar/Tabbar";
import { getCookie } from '@/utils/tools'
//vuex
import { mapActions } from 'vuex'

export default {
   name: "App",
   components: {
      Tabbar
   },
   mounted() {
      // 当进入App时加载外卖页列表数据
      this.getShopList()
      // 获取本地cookie实现一天内免登录操作
      this.handlerUserCookie()
      // 获取用户订单
      this.getUserOrders(getCookie('username'))
   },
   methods: {
      ...mapActions('mstite', ['getShopList']),
      ...mapActions('profile', ['handlerUserCookie']),
      ...mapActions('order', ['getUserOrders']),
   }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
// 解决chrome重复触发移动端点击事件的报错信息
// * { touch-action: none; }

:root{
   --theme : #074855; // 主题背景
   // --theme : #192a54; // 主题背景
   // --theme : #B298A1; // 主题背景
   // 背景图
   --bgimg: url(''); //主题背景 https://img0.baidu.com/it/u=994428973,2452235125&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=464
   --bgdanger: url('https://img2.baidu.com/it/u=4071630305,2374165205&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'); //危险背景图
   --bgsuccess: url('https://img0.baidu.com/it/u=4227109267,580281231&fm=253&fmt=auto&app=138&f=JPEG?w=539&h=500'); //成功背景图
}

@import './common/stylus/mixins.styl';
@media (min-width: 750px) {
   .van-popup {
      max-width: 750px !important;
      left: 50% !important;
      margin-left: -375px;
   }
   .van-popup--right {
      width: 150px !important;
      margin-left: 225px;
   }
   .van-overlay {
      position: fixed !important;
   }
   .van-icon { cursor: pointer;}
   #app {
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      &::-webkit-scrollbar{ display: none;}
      .footer_guide {
         border-left: 1px solid #eee;
         border-right: 1px solid #eee;
         box-sizing: border-box;
      }
   }
}
#app {
   width: 100%;
   max-width: 750px;
   height: 100%;
   margin: 0 auto;
   box-sizing: border-box;
   position: relative;
   &::-webkit-scrollbar{ display: none;}

   .content { // 每个页面的内容
      &::-webkit-scrollbar{ display: none;} // 隐藏滚动条
      >div { // 决定哪个页面显示
         &.on {
            display: block;
         }
      }
   }

   >.off {
      display: none;
   }

   >.on {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 200;
   }
}
</style>
